<template>
  <div class="main">
    <div class="clearfix TshareHeader">
      <h3 class="bigTitle fl" @click="changeTheme(null)">全部资源</h3>
      <ul class="fl clearfix choiceContainer">
        <li class="fl shareChoice" @click="changeTheme('操作系统')">
          操作系统
        </li>
        <li class="fl shareChoice" @click="changeTheme('前端')">前端</li>
        <li class="fl shareChoice" @click="changeTheme('计算机组成')">
          计算机组成
        </li>
        <li class="fl shareChoice" @click="changeTheme('数字图像处理')">
          数字图像处理
        </li>
        <li class="fl shareChoice" @click="changeTheme('操作系统')">
          操作系统
        </li>
        <li class="fl shareChoice" @click="changeTheme('数据库')">数据库</li>
      </ul>
      <span class="fr more">更多 >></span>
    </div>
    <div class="TshareBody">
      <div class="Theader">
        <span
          class="click"
          :class="changeColor == 1 ? 'clickStyle' : ''"
          @click="changeStyle(1)"
          >推荐</span
        >
        <span
          class="click"
          :class="changeColor == 2 ? 'clickStyle' : ''"
          @click="changeStyle(2)"
          >热门</span
        >
      </div>
      <ul class="clearfix" v-loading="loading">
        <li
          v-for="article in articles"
          :key="article.articleId"
          class="TshareItem fl"
        >
          <h3 class="itemTitle">
            <router-link :to="'/lookpost/' + article.articleId">{{
              article.title
            }}</router-link>
          </h3>
          <p class="showTwoLine">
            {{ article.summary }}
          </p>
          <div class="clearfix">
            <span class="techerTag fl">{{ article.nickName }}</span>
            <span class="techerTag fr">{{ article.teacherTitle }}</span>
          </div>
          <i class="iconfont icon-mianxing-dianzan fl thumb"></i
          ><span class="fl smallWord">{{ article.goodCount }}</span>
          <span class="fr smallWord">{{ article.readCount }}浏览</span>
        </li>

        <li class="TshareItem fl">
          <h3 class="itemTitle">
            首先就是家和三楼的瓦香鸡，被人们称作嘉禾三楼晚饭第一选择
          </h3>
          <p class="showTwoLine">
            首先就是家和三楼的瓦香鸡，被人们称作嘉禾三楼晚饭第一选择
          </p>
          <div class="clearfix">
            <span class="techerTag fl">李宁</span>
            <span class="techerTag fr">副教授</span>
          </div>
          <i class="iconfont icon-mianxing-dianzan fl thumb"></i
          ><span class="fl smallWord">12</span>
          <span class="fr smallWord">9009浏览</span>
        </li>
      </ul>
      <div class="mauto">
        <el-pagination
          :current-page="currentPage"
          :total="totalRecords"
          :page-size="limit"
          :page-sizes="[15, 30, 45, 60, 75, 90, 115]"
          style="margin: 30px 0; text-align: center"
          layout="sizes,prev,pager,next,jumper,->,total,slot"
          @current-change="find1BoardEssay(currentPage, limit, theme, findType)"
          @size-change="changeSize"
        />
      </div>
    </div>
  </div>
</template>

<script scoped>
import forumApi from "@/api/forumApi";
export default {
  name: "teachershare",
  data() {
    return {
      loading: true,
      theme: "",
      findType: 0,
      currentPage: 1,
      totalRecords: 100,
      limit: 15,
      drawer: false,
      changeColor: 2,
      articles: [
        {
          articleId: "QqOqBK2nK7",
          pBoardId: 1,
          pBoardName: "教师资源分享",
          userId: 202003151002,
          nickName: "gy",
          title: "12345",
          tag: "摸鱼",
          content: "内容",
          summary: null,
          postTime: "2023-02-03 17:32:42",
          lastUpdateTime: "2023-02-21 01:02:46",
          readCount: 0,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: null,
          attachmentType: 1,
          star: null,
          questionType: 1,
          answer: "答案",
          deadline: "2023-02-01 02:22:47",
        },
      ],
    };
  },
  created() {
    this.find1BoardEssay(this.currentPage, this.limit, null, 0);
  },
  methods: {
    changeStyle(number) {
      this.changeColor = number;
      this.findType = number - 1;
      if (number == 1) {
        this.findType = 0;
        this.find1BoardEssay(
          this.currentPage,
          this.limit,
          this.theme,
          this.findType
        );
      } else if (number == 2) {
        this.searchVo = 1;
        this.find1BoardEssay(
          this.currentPage,
          this.limit,
          this.theme,
          this.findType
        );
      }
    },
    find1BoardEssay(pageNum, pageSize, theme, findType) {
      forumApi
        .find1BoardEssay(pageNum, pageSize, theme, findType)
        .then((response) => {
          this.articles = [];
          this.totalRecords = response.data.size;
          for (var i = 0; i < response.data.records.length; i++) {
            var forumArticle = response.data.records[i].forumArticle;
            forumArticle.teacherTitle = response.data.records[i].teacherTitle;
            this.articles.push(forumArticle);
          }
          this.loading = false;
        });
    },
    changeTheme(theme) {
      this.theme = theme;
      this.find1BoardEssay(
        this.currentPage,
        this.limit,
        this.theme,
        this.findType
      );
    },
    changeSize(size) {
      this.limit = size;
    },
  },
};
</script>

<style scoped>
.main {
  float: left;
  width: 90%;
  height: 660px;
  margin: 0 10px;
  border-radius: 5px;
  /* padding: 20px; */
  /* background-color: white; */
}
.click {
  margin-right: 20px;
}
.click:hover {
  cursor: pointer;
}
.clickStyle {
  color: #fc5531;
}
.TshareHeader {
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  /* border: 1px solid #9d9dac; */
}
.choiceContainer {
  margin-left: 100px;
}
.more {
  line-height: 22px;
  font-size: 13px;
  color: #d69b23;
}
.more:hover {
  cursor: pointer;
  color: #e8c682;
}

.shareChoice {
  line-height: 22px;
  padding: 3px 10px;
  margin: 0 7px;
  background-color: #f7f7fc;
  color: #9d9dac;
}
.shareChoice:hover {
  cursor: pointer;
  color: #d69b23;
  background-color: #fdf2e2;
}
.bigTitle:hover {
  cursor: pointer;
  color: #d69b23;
}
.TshareBody {
  margin: 10px 0;
  height: 800px;
  padding: 20px 0;
  /* border: 1px solid #9d9dac; */
  border-radius: 5px;
  background-color: #fff;
}
.Theader {
  height: 50px;
  padding: 0 20px;
  margin: 0 auto;
  /* background-color: pink; */
}
.TshareItem {
  height: 190px;
  width: 191px;
  margin: 0 0 20px 25px;
  padding: 15px;
  /* border: 1px solid rgba(0, 0, 0, 0.2); */
  background: url("./images/document.png");
  background-size: 191px;

  /* background-color: pink; */
}
.itemTitle {
  font-weight: normal;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.showTwoLine {
  margin: 10px 0 10px 0;
  color: #97a3ad;
  /* 主要代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  min-height: 55px;
  /* 几行后显示省略号 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.techerTag {
  color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
  padding: 1px 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-bottom: 20px;
}
.smallWord {
  color: rgba(0, 0, 0, 0.4);
  font-size: 13px;
  line-height: 20px;
}
.thumb {
  color: #fc5531;
}
.thumb:hover {
  cursor: pointer;
}
.mauto {
  width: 45%;
  margin: 0 auto;
}
</style>
